import { Button, Form, Input, Table, Card, message } from 'antd';
import React, { useEffect, useState,Key } from 'react'
import style from './index.module.css';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { gethosSetListRequest,deleteHosListRequest ,deleteSomeListRequest} from '@/api/hospital/hospitalSet';
import type { gethosSetListRecordsType,gethosSetListItemsType } from '@/api/hospital/model/hospitalTypes'
import { useNavigate} from 'react-router-dom';
export default function HospitalSet() {
  const navigate = useNavigate()
  //在一开始就发送请求 获取后台数据
  const [hosSetList, sethosSetList] = useState<gethosSetListRecordsType>([])  
  // 获取当前页数
  const [current, setCurrent] = useState(1)
  // 获取每页数据数量
  const [pageSize, setPageSize] = useState(3)
  // 获取数据总条数
  const [total, setTotal] = useState(0)
  // 是否加载
  const [isLoading, setIsLoading] = useState(false)

  // 获取表单的值
  const [getFieldValue, setGetFieldValue] = useState<setFieldValueType>({})

  // 渲染页面
  const [rend,setRend] = useState(true)

  // 批量删除的状态
  const [isSelecter,setIsSelecter] = useState(true)

  // ids状态
  const [getids,setGetIds] = useState<Key[]>([])

  useEffect(() => {
    // 在进行数据请求之前把isLoading加载的状态变成true 显示加载状态 ， 在数据请求到之后 把isLoading加载的状态变成false 关闭加载状态
    setIsLoading(true)
    const gethosSetList = async () => {
      const res = await gethosSetListRequest({
        page: current,
        limit: pageSize,
        ...getFieldValue
      })
      sethosSetList(res.records)
      setTotal(res.total)
      setIsLoading(false)
    }
    gethosSetList()
  }, [current, pageSize, getFieldValue,rend])

  // 设置FieldValue对象的类型
  interface setFieldValueType {
    hosname?: string,
    hoscode?: string
  }

  // 添加医院
  const addHoshandle = () => {
    // const navigate = useNavigate() 这个写法是错误的 hooks只能写在组件或者自定义hooks中
    navigate('/syt/hospital/addhospital')
  }

  // 删除医院
  const deleteHosListhandle = (id:number)=>{

      return async ()=>{
        await deleteHosListRequest(id)
        message.success('删除成功')
        setRend(!rend)
      }
  }

  // 批量删除事件
  const deleteSomeListhandle = async ()=>{
    
      await deleteSomeListRequest(getids)
      message.success('删除成功')
      setRend(!rend)
      setIsSelecter(true)


  }

  const columns = [
    {
      title: '序号',
      width: 90,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号  ',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径  ',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名  ',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人电话',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      width: 180,
      fixed: 'right' as 'right',
      dataIndex: 'do',
      render(_:any,data:gethosSetListItemsType) {
        const {id} = data      
        return (
          <div>
            <Button
              type='primary'
              className={style.mr}
              icon={<EditOutlined />}
              onClick={() => {
                navigate(`/syt/hospital/updatahospital/${id}`)
              }}
            ></Button>
            <Button type='primary' onClick={deleteHosListhandle(id)} danger icon={<DeleteOutlined />}></Button>
          </div>
        )
      }
    },
  ];
  return (
    <div className={style.outer}>
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 25 }}
          initialValues={{ remember: true }}
          autoComplete="off"
          layout='inline'
          onFinish={(FieldValue: setFieldValueType) => {
            setGetFieldValue(FieldValue)

          }}
        >
          <Form.Item
            name="hosname"
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset" >
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.mt}>
          <Button type='primary' className={style.mr} onClick={addHoshandle}>添加</Button>
          <Button type='primary' danger onClick={deleteSomeListhandle} disabled={isSelecter}>批量清空</Button>
        </div>
        <div className={style.mt}>
          <Table
            columns={columns}
            dataSource={hosSetList}
            rowSelection={
              {
                onChange(ids:Key[],datas:gethosSetListRecordsType ){
                  setIsSelecter(!ids.length)
                  setGetIds(ids)
                }
              }

            }
            scroll={{ x: 1500 }}
            rowKey='id'
            loading={isLoading} //isLoading的值为布尔值 当它为true时 就会一直显示Loading加载状态
            pagination={
              {
                current,
                total,
                pageSize,
                pageSizeOptions: [3, 5, 8],
                showSizeChanger: true, //  是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                showTotal: (total) => {// 展示数据总条数和当前数据顺序
                  return `数据共有${total}条`
                },
                onChange: (current: number, pageSize: number) => {
                  return (
                    setCurrent(current),
                    setPageSize(pageSize)
                  )
                }
              }
            }
          />

        </div>
      </Card>
    </div>
  )
}
